
<template>
  <div class="bodyWrap">
    <div class="loginBg"  v-if='loginBg' :style="{background: 'url('+ loginBg +')', backgroundSize:'cover' }">
      <!--<img :src="loginBg">-->
    </div>
    <div class="loginBox" :keyup.enter = "login">
      <h3>拓道直播后台管理系统</h3>
      <el-form :model="userInfo"  ref="userForm" :rules="rules" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName" >
          <el-input v-model="userInfo.userName"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWorld">
          <el-input type="password" v-model="userInfo.passWorld" auto-complete="off"  placeholder="请填写密码"></el-input>
        </el-form-item>
        <el-form-item class="btnWrap">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button   @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <p class="botomTips">copyright@2016 商用平台 保留所有权</p>
  </div>

</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import loginBg from '@/assets/loginbg.jpg';
  export default {
    data () {
      return {
        rules: {
          userName: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          passWorld: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        },
        loginBg
      };
    },
    methods: {
      // user map 到vuex
      ...mapMutations(['toLogin']),
      // 登录
      login () {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            this.$notify({
              title: '成功',
              message: '登录成功',
              type: 'success'
            });
            this.$router.push({name: 'home', path: '/home'});
            this.toLogin(this.userInfo);
          } else {
            this.$notify.error({
              title: '错误',
              message: '密码或用户名错误'
            });
            return false;
          }
        });
      },
      // 重置清空
      reset () {
        this.userInfo.userName = '';
        this.userInfo.passWorld = '';
        this.toLogin(this.userInfo);
      }
    },
    components: {},
    created: function () {
    },
    computed: {
      ...mapState(['userInfo'])
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .loginBox{
    width: 400px;
    min-width: 348px;
    min-height: 178px;
    padding: 20px;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0,0,0,.22);
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index: 999;
  }
  h3{
    text-align: center;
    font-weight: 400;
  }
  .bodyWrap{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #F5F4F2;
  }
  .loginBg{
    height: 500px;
    width: 100%;
    position: relative;
    left: 0px;
    top:0px;
  }
  html{
    background: #F5F4F2;
  }
  .btnWrap{
    text-align: right;
  }
  .botomTips{
    text-align: center;
    font-size: 14px;
    color: #b6b6b6;
    position: absolute;
    bottom: 200px;
    width: 100%;
    z-index: 1;
  }

</style>
